import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import demo from '@/components/demo'
import Home from '@/components/Home'
import welcome from '@/components/Welcome'
import Users from '@/components/user/Users'
// 导入全局样式表
import '@/assets/css/global.css'
import { defaults } from 'autoprefixer'
Vue.use(Router)

const router =  new Router({
  routes: [
    {
      path: "/login",
      component: Login
    },
    {
      path: "/",
      redirect: "/login"
    },{
      path: "/demo",
      component: demo
    },{
      path: "/home",
      redirect: "/welcome",
      // children定义子路由规则，可以使用重定向
      component: Home , children: [{
          path: "/welcome",
          component: welcome
        },{
          path: "/users",
          component: Users
        }]
    }
    
  ]
})

// 路由导航护卫控制访问权限
// 如果用户没有登录，但是直接通过Url访问特定页面，需要重新导航到登陆页面
// token是后端根据用户名密码确定的，验证token是后端的问题，前端只需要判断有无
// 退出登录时需要清空token
router.beforeEach((to,from,next)=>{
  // 跳转到login页面，则通行
  if(to.path==="/login") 
    return next();
  // 否则，检查是否有token，无则跳转到登录页面
  const token = window.sessionStorage.getItem('token');
  if(!token)
   return next("/login")
  next()
})


export default router